<template>
  <header class="toutiao-header">
    <div class="logo">快知网</div>

    <div class="nav-container">
      <div class="nav-menu">
        <!-- 添加 active 类绑定 -->
        <div class="nav-item" :class="{ active: activeNavIndex === 0 }" @click="setActiveNav(0)">优秀的作者</div>
        <div class="nav-item" :class="{ active: activeNavIndex === 1 }" @click="setActiveNav(1)">首页</div>
      </div>
    </div>

    <div class="search-box">
      <input 
        type="text" 
        placeholder="搜索" 
        v-model="searchText" 
        @keyup.enter="handleSearch">
      <i class="el-icon-search" @click="handleSearch"></i>
    </div>

    <div class="right-area">
      <div class="icon-with-text">
        <div class="icon-btn">
          <i class="el-icon-bell"></i>
        </div>
        <span>通知</span>
      </div>
      <div class="icon-with-text">
        <div class="icon-btn">
          <i class="el-icon-message"></i>
        </div>
        <span>消息</span>
      </div>
      <button class="publish-btn" @click="toToPublish">发布</button>
      <Login v-if="!isLogin" />
      <UserInfo v-else />
    </div>
  </header>
</template>

<script>
import Login from "../login-components/login.vue"
import UserInfo from "../login-components/UserInfo.vue"
import { mapState } from 'vuex';

export default {
  name: "Header",
  components: {
    Login, UserInfo
  },
  data() {
    return {
      searchText: '',
      activeNavIndex: 1
    };
  },
  computed: {
    ...mapState('user', ['isLogin', 'userName']),
  },
  methods: {
    setActiveNav(index) {
      this.activeNavIndex = index;
      if (index == 1) {
          this.$router.push({
          path: '/',
        })
      }
    },
    handleSearch() {
      if (!this.$store.state.user.isLogin) {
        this.$centerMessage({
          message: '未登录，无法搜索',
          type: 'error'
        });
        return;
      }

      if (this.searchText.length > 15) {
        this.$centerMessage({
          message: '超过 15 个字',
          type: 'error'
        });
        return;
      }
      
      console.log('用户输入内容:', this.searchText);

      this.$api.serviceNews.post('api/news/searchNews', 
      {userAccount: this.$store.state.user.isLogin, keyWord: this.searchText}, 
      {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log('失败', error);
      });
    },
    toToPublish() {
      if (!this.$store.state.user.isLogin) {
        this.$centerMessage({
          message: '未登录，无法发布',
          type: 'error'
        });
        return;
      }

      this.$api.serviceUser.post('api/user/checkUserLevel', 
      {userAccount: this.$store.state.user.userAccount}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        console.log(response.data.data);
        console.log(response.data.data == false);
        
        if (response.data.data) {
          this.$router.replace({
            name: 'publish',
          });
        } else {
          this.$centerMessage({
            message: '用户等级不够',
            type: 'error'
          });
          return
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    }
  }
};
</script>

<style scoped>
.toutiao-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 15px;
  z-index: 1000;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d4f;
  margin-right: 30px;
  cursor: pointer;
}

.nav-container {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-container::-webkit-scrollbar {
  display: none;
}

.nav-menu {
  display: flex;
  height: 100%;
  white-space: nowrap;
}

.nav-item {
  padding: 0 15px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  margin-top: 6px;
  color: #333;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.nav-item:hover {
  color: #ff4d4f;
}

.nav-item.active {
  color: #ff4d4f;
  font-weight: bold;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 3px;
  background: #ff4d4f;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 0 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.search-box input {
  border: none;
  background: transparent;
  outline: none;
  padding: 8px;
  width: 200px;
}

.search-box i {
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}

.search-box i:hover {
  color: #ff4d4f;
}

.right-area {
  display: flex;
  align-items: center;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 5px;
  color: #666;
  background-color: rgba(245, 245, 245, 0);
  transition: background-color 0.3s, color 0.3s;
}

.icon-btn:hover {
  background-color: rgba(245, 245, 245, 1);
}

.icon-btn:hover i {
  color: #ff4d4f;
}

.publish-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s;
}

.publish-btn:hover {
  background-color: #ff7875;
}

.login-btn {
  background-color: transparent;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.login-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.icon-with-text {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.icon-with-text span {
  margin-left: 2px;
  margin-bottom: 1px;
}
</style>